<template>
  <div>
    <!-- 金额 -->
    <div class="column">
        <div class="container layout column-elem " style="background-color: #2e7ba7;">
            <div style="margin: 0 auto;">
                <!-- 订单 -->
                <div class="content" style="padding:0px; ">
                    <div class="path-description" style="margin:0px;">
                        <div class="path-desc-top clearfix order" style=" height: 115px; background-color: #2e7ba7;">
                            <div class="col-md-10 col-md-offset-1 path-desc-text" >剩余待支付总金额（元）
                            </div>
                            <div class="col-md-10 col-md-offset-1 path-desc-text">
                                <div class="orderState" data-toggle="modal" data-target="#myModalPayRecord" aria-hidden="true">17890.16 <i class="fa" style="font-size:30px">&#xf105</i> </div>
                            </div>
                            <div class="col-md-10 col-md-offset-1 path-desc-text order-time">
                                请最晚在每期到期支付日第二天中午12:00前主动支付
                            </div>
                        </div>
                    </div>
                </div>

            </div>

        </div>
    </div>

    <!-- 绑定课程 -->
    <div class="navbar-banner ">
        <div class="bindCourse">

            <form action="/bindCourse" method="post">

                <div class="form-group course">
                    <div class="input-group" style="font-size: 15px;"><strong>支付列表</strong></div>

                    <div class="input-group">
                        <ul>
                            <li>
                                <span>到期支付日 2022-07-15</span>
                                <span @click="toRecordPay">
                                  <!-- <router-link to="/payDetail/planPay/recordPay"> -->
                                    支付记录 

                                  <!-- </router-link> -->
                                  <i class="fa" style="font-size:15px">&#xf105</i>
                                </span>
                            </li>
                            <li>
                                <span>1/18 <button class=""
                                        style="background-color:#97d9fe; outline: none; ">待付</button> </span>
                                <span><button class="btn btn-primary">去支付</button></span>
                            </li>
                            <li>
                                <span><strong>学费（元）</strong></span>
                                <span><strong>2190</strong></span>
                            </li>
                            <li>
                                <span>服务费（元）</span>
                                <span>123.4</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <span>应付金额（元）</span>
                                <span>135.98</span>
                            </li>
                        </ul>

                    </div>
                </div>

                <div class="form-group course">
                    <div class="input-group">
                        <ul>
                            <li>
                                <span>到期支付日 2022-07-15</span>
                                <span>支付记录 <i class="fa" style="font-size:15px">&#xf105</i></span>
                            </li>
                            <li>
                                <span>1/18</span>
                                <span><button class="btn ">已支付</button></span>
                            </li>
                            <li>
                                <span><strong>学费（元）</strong></span>
                                <span><strong>2190</strong></span>
                            </li>
                            <li>
                                <span>服务费（元）</span>
                                <span>123.4</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <span>应付金额（元）</span>
                                <span>135.98</span>
                            </li>
                        </ul>

                    </div>
                </div>

                <div class="form-group course">
                    <div class="input-group">
                        <ul>
                            <li>
                                <span>到期支付日 2022-07-15</span>
                                <span>支付记录 <i class="fa" style="font-size:15px">&#xf105</i></span>
                            </li>
                            <li>
                                <span>1/18</span>
                                <span><button class="btn ">已支付</button></span>
                            </li>
                            <li>
                                <span><strong>学费（元）</strong></span>
                                <span><strong>2190</strong></span>
                            </li>
                            <li>
                                <span>服务费（元）</span>
                                <span>123.4</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <span>应付金额（元）</span>
                                <span>135.98</span>
                            </li>
                        </ul>

                    </div>
                </div>


            </form>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="modal fade" id="myModalPayRecord" tabindex="-1" role="dialog" aria-labelledby="myModalPayRecordLabel"
        aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalPayRecordLabel" style="text-align: center;">剩余待支付详情</h4>
                </div>
                <div class="modal-body">
                    <div class="input-group">
                        <ul>
                            <li>
                                <span>剩余待支付学费</span>
                                <span>￥17130</span>
                            </li>
                            <li>
                                <span>剩余待支付服务费</span>
                                <span>￥171.16</span>
                            </li>
                            <li>
                                <span>剩余待支付滞纳金</span>
                                <span>￥0.00</span>
                            </li>
                        </ul>
                        <ul>
                            <li>
                                <span>剩余待支付总金额</span>
                                <span>￥17810.16</span>
                            </li>
                        </ul>

                    </div>

                </div>
            </div><!-- /.modal-content -->
        </div><!-- /.modal -->
    </div>

  </div>
</template>

<script>
export default {
    name:'PlanPay',
    methods:{
      toRecordPay(){
        this.$router.push({
          path:'/payDetail/recordPay'
        })
      }
    }

}
</script>

<style>
@import url(../csspay.css);
</style>